<template>
  <ToolbarButton
    icon="i-ri-italic"
    title="斜体"
    shortcut="Ctrl+I"
    :active="isActive"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { computed, inject, type Ref } from "vue";
import type { Editor } from "@tiptap/vue-3";
import ToolbarButton from "../../../button/index.vue";

defineOptions({
  name: "Italic",
});

// 注入编辑器实例
const editor = inject<Ref<Editor>>("editor");

const isActive = computed(() => {
  return editor?.value?.isActive("italic");
});

const handleClick = () => {
  if (!editor?.value) {
    console.log("Editor not available");
    return;
  }
  editor.value?.chain().focus().toggleItalic().run();
};
</script>
